<template>
   <div class="editor" 
   id="editor"
   @mousedown="handleMouseDown"
   @contextmenu="handleContextMenu"
   >
       <Shape v-for="(item,index) in componentData" :key="item.id"  ::element="item" :style="item.style" :index="index">
         <component :is="item.component" :id="'component'+item.id" :style="item.style" :element="item" >
         </component>
       </Shape> 
   </div>
</template>
    <script>
    
    import Shape from "./Shape.vue"
    import { mapState } from 'vuex'
    export default {
      name: 'Edits',
      components: {
        Shape
      },
      data(){
          return {
           
          }
      },
      computed:{
         ...mapState(['editor','componentData'])
      },
      watch:{
        componentData:{
            handler(n,o){
                console.log(n,o)
            },
            deep:true
        }
      },
      mounted() {
          console.log(this.componentData)
          this.$store.commit('getEditor')
      },
      methods: {
        handleContextMenu(e) {
            e.stopPropagation()
            e.preventDefault()
            console.log(e)
        
        },

        handleMouseDown(e){
            e.preventDefault()
            
            const rectInfo = this.editor.getBoundingClientRect()
            console.log(rectInfo)

        }
      },
    }
    </script>
    
    <style lang="scss" scoped>
       .editor{
           position: relative;
           width: 100%;
           height: 100%;
           background-color: aqua;
           margin: auto;
       }
    </style>
    